<template>
  <div>
    <el-card shadow="never">
      <el-menu :default-active="active" @select="onSelect">
        <el-menu-item
          v-for="item in filterMap"
          :key="item.path"
          :index="item.path"
        >
          <div @click="link(item.path)">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </div>
        </el-menu-item>
      </el-menu>
    </el-card>

    <el-card shadow="never" style="margin-top: 20px; text-align: center">
      <div
        v-if="!token"
        style="font-size: 0.9rem; line-height: 1.5; color: #606c71"
      >
        <el-tag type="danger" size="small">&nbsp;</el-tag>&nbsp;&nbsp;
        Token未绑定&nbsp;&nbsp;
        <el-button type="text" @click="openTokenDialog">绑定</el-button>
      </div>
      <div
        v-if="token"
        style="font-size: 0.9rem; line-height: 1.5; color: #303133"
      >
        <el-tag type="success" size="small">&nbsp;</el-tag>&nbsp;&nbsp;
        Token已绑定&nbsp;&nbsp;
        <el-button type="text" @click="cancellation">注销</el-button>
      </div>
      <div style="margin-top: 10px; text-align: left">
        <el-alert
          title="Token获取"
          type="info"
          description="在 github-> settings-> developerSettings-> personalAccessTokens 勾选gist权限,获取Token. 详情参考README.md"
          :closable="false"
        ></el-alert>
      </div>
    </el-card>
    <token-dialog ref="tokenDialog"></token-dialog>
  </div>
</template>

<script>
import TokenDialog from "../../components/TokenDialog";
export default {
  name: "Slidebar",
  components: {
    TokenDialog,
  },
  data() {
    return {
      constantRouterMap: [
        {
          type: "user",
          icon: "el-icon-star-off",
          title: "最新动态",
          path: "/",
        },
        {
          type: "user",
          icon: "el-icon-mobile-phone",
          title: "社交圈",
          path: "/social",
        },
        {
          type: "user",
          icon: "el-icon-edit-outline",
          title: "博客列表",
          path: "/blog",
        },
        {
          type: "user",
          icon: "el-icon-service",
          title: "开源项目",
          path: "/project",
        },
        {
          type: "user",
          icon: "el-icon-printer",
          title: "使用帮助",
          mini: true,
          path: "/helper",
        },
        {
          type: "user",
          icon: "el-icon-document",
          title: "README.md",
          path: "/readme",
        },
        {
          type: "user",
          icon: "el-icon-setting",
          title: "系统配置",
          LoginRequired: true,
        },
      ],
      active: "",
      parentUrl: "",
      menuList: [],
      token: null,
    };
  },
  computed: {
    filterMap() {
      return this.constantRouterMap.filter(
        (item) =>
          item && item.type == "user" && (this.token || !item.LoginRequired)
      );
    },
  },
  mounted() {
    let arr = this.$route.path.split("/");
    this.active = "/" + arr[1];
  },
  methods: {
    onSelect(index) {
      this.$router.push(index);
    },
    openTokenDialog() {
      this.$refs.tokenDialog.open(() => {});
    },
    cancellation() {
      this.$store.dispatch("Cancellation");
    },
    link(path) {
      this.$router.push(path).catch(() => {});
    },
  },
};
</script>

<style scoped>
</style>